<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<specifications-model v-bind="{data:data}" @previewImage="previewImage" @hideAttrPicker="hideAttrPicker" @groupCheck="groupCheck" @attrNumClick="attrNumClick" @dappAttrClick="dappAttrClick" @numberSub="numberSub" @numberBlur="numberBlur" @numberAdd="numberAdd"></specifications-model>
        <view :class="data.show_attr_picker||data.show||data.no_scroll?'no-scroll':''">
            <view style="padding-bottom: 120upx">
							<goods-banner v-bind="{data:data}" @hide="hide" @onGoodsImageClick="onGoodsImageClick" @play="play"></goods-banner>
							<goods-info v-bind="{data:data}" @showDialogBtn="showDialogBtn" @jian="jian" @goodNumChange="goodNumChange" @jia="jia" @showShareModal="showShareModal" @showAttrPicker="showAttrPicker" @getGoodsQrcode="getGoodsQrcode" @shareModalClose="shareModalClose" @close="close" @goodsQrcodeClick="goodsQrcodeClick" @saveGoodsQrcode="saveGoodsQrcode" @goodsQrcodeClose="goodsQrcodeClose" @onShareWebMessage="onShareWebMessage"></goods-info>
                <view class="tab-group">
                    <view class="flex-row tab-group-header hide">
                        <view @tap="tabSwitch" :class="['flex-grow-1 flex-x-center tab-group-item', data.tab_detail]" data-tab="detail">
                            <text class="flex-y-center">商品详情</text>
                        </view>
                        <view @tap="tabSwitch" :class="['flex-grow-1 flex-x-center tab-group-item', data.tab_comment]" data-tab="comment" v-if="data.__is_comment">
                            <text class="flex-y-center">评价</text>
                        </view>
                    </view>
                    <view class="tab-group-body">
                        <view :class="['tab-group-item', data.tab_detail]">
                            <view class="goods-detail">
															<wx-parse :myNodes="data.detail.nodes"></wx-parse>
                            </view>
                        </view>
                        <view :class="['tab-group-item', data.tab_comment]">
                            <view class="comment-count flex-row">
                                <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                    <view>全部</view>
                                    <view>({{data.comment_count.score_all>999?'999+':data.comment_count.score_all}})</view>
                                </view>
                                <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                    <view>好评</view>
                                    <view>({{data.comment_count.score_3>999?'999+':data.comment_count.score_3}})</view>
                                </view>
                                <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                    <view>中评</view>
                                    <view>({{data.comment_count.score_2>999?'999+':data.comment_count.score_2}})</view>
                                </view>
                                <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                    <view>差评</view>
                                    <view>({{data.comment_count.score_1>999?'999+':data.comment_count.score_1}})</view>
                                </view>
                            </view>
                            <view class="comment-list">
                                <view class="comment-item flex-row" v-for="(item,index) in data.comment_list" :key="item.id">
                                    <view class="flex-grow-0" style="overflow: visible">
                                        <image mode="aspectFill" :src="item.avatar_url" style="width: 70upx;height: 70upx;border-radius: 1000upx"></image>
                                    </view>
                                    <view class="flex-grow-1">
                                        <view class="flex-row mb-20">
                                            <view class="flex-grow-1 flex-y-center nickname">{{item.nickname}}</view>
                                            <view class="flex-grow-0 flex-y-center addtime">{{item.addtime}}</view>
                                        </view>
                                        <view class="mb-20">{{item.content}}</view>
                                        <view class="pic-list" v-if="item.pic_list&&item.pic_list.length>0">
                                            <image @tap="commentPicView" class="pic-item" :data-index="index" :data-pic-index="pic_index" mode="aspectFill" :src="pic" v-for="(pic,pic_index) in item.pic_list" :key="pic.id"></image>
                                        </view>
                                        <view class="reply" v-if="item.reply_content">商家:
                                            <view class="reply-content">{{item.reply_content}}</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
						<goods-buy v-bind="{data:data}" @goHome="goHome" @favoriteRemove="favoriteRemove" @favoriteAdd="favoriteAdd" @kfMessage="kfMessage" @callPhone="callPhone" @addCart="addCart" @buyNow="buyNow" @bespeakNow="bespeakNow" @onlyBuy="onlyBuy"></goods-buy>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = require("../../../wxParse/wxParse.js"), a = require("../../../components/goods/specifications_model.js"), e = require("../../../components/goods/goods_banner.js"), o = require("../../../components/goods/goods_info.js"), i = require("../../../components/goods/goods_buy.js");
	import specificationsModel from '../../../components/goods/specifications_model.vue'
	import goodsBanner from '../../../components/goods/goods_banner.vue'
	import goodsInfo from '../../../components/goods/goods_info.vue'
	import goodsBuy from '../../../components/goods/goods_buy.vue'
	export default {
		components:{specificationsModel,goodsBanner,goodsInfo,goodsBuy},
		data() {
			return {
				data: {
        pageType: "INTEGRAL",
        hide: "hide",
        tab_detail: "active",
        tab_comment: "",
				content: {}
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
        var a = this;
        t.integral && a.setData({
            user_integral: t.integral
        }), t.goods_id && (a.setData({
            id: t.goods_id
        }), a.getGoods());
    },
		onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this), a.init(this), e.init(this), o.init(this), i.init(this);
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(t) {
        myVue.getApp.page.onReachBottom(this);
    },
		methods: {
			getGoods: function() {
        var a = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.integral.goods_info,
            data: {
                id: a.data.id
            },
            success: function(e) {
                if (0 == e.code) {
                    var o = e.data.goods.detail;
                    t.wxParse("detail", "html", o, a), a.getApp.core.setNavigationBarTitle({
                        title: e.data.goods.name
                    });
                    var i = e.data.goods;
                    i.num = i.goods_num, i.pic_list = i.goods_pic_list, i.min_price = i.price > 0 ? i.integral + "积分 ￥" + i.price : i.integral + "积分", 
                    a.setData({
                        goods: e.data.goods,
                        attr_group_list: e.data.attr_group_list
                    }), a.selectDefaultAttr();
                } else a.getApp.core.showModal({
                    title: "提示",
                    content: e.msg,
                    showCancel: !1,
                    success: function(t) {
                        t.confirm && a.getApp.core.navigateTo({
                            url: "/pages/integral-mall/index/index"
                        });
                    }
                });
            },
            complete: function(t) {
                setTimeout(function() {
                    myVue.getApp.core.hideLoading();
                }, 500);
            }
        });
    },
    showShareModal: function() {
        this.setData({
            share_modal_active: "active",
            no_scroll: !0
        });
    },
    shareModalClose: function() {
        this.setData({
            share_modal_active: "",
            no_scroll: !1
        });
    },
    exchangeGoods: function() {
        var t = this;
        if (!t.data.show_attr_picker) return t.setData({
            show_attr_picker: !0
        }), !0;
        var a = t.data.attr_group_list, e = [];
        for (var o in a) {
            var i = !1;
            for (var r in a[o].attr_list) if (a[o].attr_list[r].checked) {
                i = {
                    attr_id: a[o].attr_list[r].attr_id,
                    attr_name: a[o].attr_list[r].attr_name
                };
                break;
            }
            if (!i) return myVue.getApp.core.showToast({
                title: "请选择" + a[o].attr_group_name,
                image: "/static/images/icon-warning.png"
            }), !0;
            e.push({
                attr_group_id: a[o].attr_group_id,
                attr_group_name: a[o].attr_group_name,
                attr_id: i.attr_id,
                attr_name: i.attr_name
            });
        }
        var n = t.data.user_integral, s = t.data.attr_integral, g = t.data.attr_num;
        if (parseInt(n) < parseInt(s)) return myVue.getApp.core.showToast({
            title: "积分不足!",
            image: "/static/images/icon-warning.png"
        }), !0;
        if (g <= 0) return myVue.getApp.core.showToast({
            title: "商品库存不足!",
            image: "/static/images/icon-warning.png"
        }), !0;
        var d = t.data.goods, p = t.data.attr_price, s = t.data.attr_integral;
        t.setData({
            show_attr_picker: !1
        }), myVue.getApp.core.navigateTo({
            url: "/pages/integral-mall/order-submit/index?goods_info=" + JSON.stringify({
                goods_id: d.id,
                attr: e,
                attr_price: p,
                attr_integral: s
            })
        });
    },
		},
	}
</script>

<style scoped>
.page /deep/ view {
    overflow: visible;
}

.page /deep/ .no-scroll {
    height: 100%;
    overflow-y: hidden;
}

.page /deep/ .goods-detail {
    box-sizing: border-box;
    padding: 24upx 0;
    background: #fff;
}

.page /deep/ .goods-detail text,.page /deep/ .goods-detail image,.page /deep/ .goods-detail view {
    box-sizing: border-box;
    max-width: 100%;
}

.page /deep/ .tab-group .tab-group-header {
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
}

.page /deep/ .tab-group .tab-group-header .tab-group-item text {
    height: 100upx;
    border-bottom: 2upx solid transparent;
}

.page /deep/ .tab-group .tab-group-header .tab-group-item.active text {
    color: #ff4544;
    border-bottom-color: #ff4544;
}

.page /deep/ .tab-group .tab-group-body .tab-group-item {
    display: none;
}

.page /deep/ .tab-group .tab-group-body .tab-group-item.active {
    display: block;
}

.page /deep/ .comment-count {
    background: #fff;
    margin-bottom: 20upx;
}

.page /deep/ .comment-count .comment-count-item {
    text-align: center;
    padding: 20upx 0;
    font-size: 9pt;
}

.page /deep/ .comment-item {
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
    padding: 32upx 24upx;
}

.page /deep/ .comment-item .nickname {
    padding-left: 24upx;
    height: 70upx;
    font-weight: bolder;
}

.page /deep/ .comment-item .addtime {
    color: #888;
}

.page /deep/ .comment-item .pic-list {
    margin-left: -8upx;
    margin-top: -8upx;
}

.page /deep/ .comment-item .pic-item {
    width: 200upx;
    height: 200upx;
    margin-left: 8upx;
    margin-top: 8upx;
    display: inline-block;
}

.page /deep/ .reply {
    margin: 20upx 24upx 20upx 0upx;
    border-radius: 16upx;
    background: #f7f7f7;
    font-size: 11pt;
    padding: 22upx 30upx;
    color: #ff4544;
}

.page /deep/ .reply-content {
    display: inline;
    color: #666666;
}

.page /deep/ .comment-item .score-tag {
    display: inline-block;
    background: #eee;
    font-size: 9pt;
    padding: 4upx 12upx;
    border-radius: 5upx;
}

.page /deep/ .hide {
    display: none;
}
</style>
